import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';

import { menuData } from "@/routers";


// const navigate = useNavigate()

const {Header, Content, Footer, Sider} = Layout;


const App: React.FC = () => {
  // console.log(routersConfig)
  const navigate = useNavigate();
  const location = useLocation()
  const selectMenuKey = location.pathname.split('/')[1]
  // console.log(location.pathname)
  const [collapsed, setCollapsed] = useState(false);
  
  return (
    <Layout style={{minHeight: '100vh'}}>
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="logo"/>
        <Menu theme="dark" defaultSelectedKeys={[location.pathname]} defaultOpenKeys={[`/${selectMenuKey}`]} mode="inline"
              items={menuData}
              onClick={(e:any) => {
                console.log(e)
                navigate(e.key, {replace: true})
              }}
              onSelect={(e) => console.log(e)}
        
        />
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{padding: 0}}/>
        <Content style={{margin: '0 16px'}}>
          <Breadcrumb style={{margin: '16px 0'}} items={[{
            title: 'Ant Design',
          },
            {
              title: <a href="">lys</a>,
            }, {
              title: <a href="">JumpSet</a>,
            },]}>
          </Breadcrumb>
          <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
            <Outlet/>
          </div>
        </Content>
        <Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};

export default App;